﻿<!doctype html>
<html>
<head lang="en">
	<meta charset="UTF-8">
<title>追加和移除样式</title>
<style type="text/css" >
*{
	margin:0px;
	padding:0px;
	font-size:14px;
	font-family:"微软雅黑";
	line-height: 28px;;
}
.title {font-size:14px; color:#03F; text-align: center; }
.text{ padding:10px;}
.content {background-color:#ddd; }
.border {border:1px dashed #03f; }
</style>

</head>
<body>

 <h2 class="title" >追加、移除样式</h2>
 <p class="text">
	 css()设置或返回样式属性<br>
	 addClass()通过类改变样式，可增加一个或多个类<br>
	 removeClass()通过类改变样式，可移除一个或多个类
 </p>
 <script src="js/jquery-1.12.4.js" ></script>
 <script>
	 $(document).ready(function(){
		 $("h2").mouseover(function() {
			 $("p").addClass("content border");
		 });
		 $("h2").mouseout(function() {
			 $("p").removeClass("text content");
		 });
              /*
                  $("h2").click(function() {
			 $("p").toggleClass("content border");
		 });
              */

	 });

 </script>
</body>
</html>
